import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:xlsk/routes/xlsk_router.dart';
import 'package:xlsk/utils/common.dart';
import 'package:xlsk/utils/dimension.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

class Login extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _loginState();
  }
}

class _loginState extends State<Login> {
  TextEditingController _inputController = new TextEditingController();
  FocusNode focusNode = FocusNode();
  var phone = '';
  bool _showClose = false;
  int focusStatus = 1;

  @override
  void initState() {
    super.initState();
    focusNode.addListener(() {
      if(!focusNode.hasFocus && focusStatus == 1){
        FocusScope.of(context).requestFocus(focusNode);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
        automaticallyImplyLeading: false,
      ),
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('欢迎使用小鹭搜课',style: TextStyle(color: Color(0xFF1F2329),fontSize: Dimension(context).toPx(26))),
            Container(
              child: Text('未绑定的手机号将无法登录，请联系后台管理员',style: TextStyle(color: Color(0xFF8F959E),fontSize: Dimension(context).toPx(13))),
              margin: EdgeInsets.only(top: Dimension(context).toPx(8)),
            ),
            Container(
              child: Text('手机号码',style: TextStyle(color: Color(0xFF646A73),fontSize: Dimension(context).toPx(14))),
              margin: EdgeInsets.only(top: Dimension(context).toPx(48)),
            ),
            Container(
              child: TextField(
                controller: _inputController,
                focusNode: focusNode,
                style: TextStyle(color: Color(0xFF1F2329),fontSize: Dimension(context).toPx(20),fontWeight: FontWeight.w700),
                inputFormatters: [LengthLimitingTextInputFormatter(11),FilteringTextInputFormatter.digitsOnly],
                textInputAction: TextInputAction.send,
                cursorColor: Color(0xFF1F2329),
                autofocus: true,
                keyboardType: TextInputType.number,
                onChanged: (e){
                    setState(() {
                      phone = e;
                      if(e.length > 0){
                        _showClose = true;
                      }else{
                        _showClose = false;
                      }
                    });
                },
                onSubmitted: (e){
                  this.sendCode();
                },
                decoration: InputDecoration(
                  prefix: Container(
                      child: Row(
                        children: [
                          Text('+86',style: TextStyle(color: Color(0xFF1F2329),fontSize: Dimension(context).toPx(20),fontWeight: FontWeight.w700)),
                          Container(
                            width: Dimension(context).toPx(1),
                            height: Dimension(context).toPx(16),
                            margin: EdgeInsets.only(left: Dimension(context).toPx(12)),
                            decoration: BoxDecoration(
                                color: Color(0xFFEBEDF0)
                            ),
                          )
                        ],
                      ),
                      width: Dimension(context).toPx(62),
                  ),
                  suffixIcon: IconButton(
                    icon: Icon(Icons.close),
                    color: Colors.black38,
                    iconSize: _inputController.text.length>0?24:0,
                    onPressed: (){
                      _inputController.clear();
                      setState(() {
                        phone = '';
                        _showClose = false;
                      });
                    },
                  ),
                  border: UnderlineInputBorder(
                    borderSide: BorderSide(
                      color: Color(0xFFEBEDF0),
                      width: Dimension(context).toPx(1)
                    )
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(
                      color: Color(0xFF1661FF),
                      width: Dimension(context).toPx(1)
                    )
                  ),
                ),
              ),
              width: Dimension(context).toPx(311),
              margin: EdgeInsets.only(top: Dimension(context).toPx(8))
            ),
            GestureDetector(
              child: Opacity(
                opacity: phone.length==11?1:0.3,
                child: Container(
                  child: Center(
                    child: Text('获取短信验证码',style: TextStyle(color: Colors.white,fontSize: Dimension(context).toPx(16))),
                  ),
                  width: Dimension(context).toPx(311),
                  height: Dimension(context).toPx(48),
                  margin: EdgeInsets.only(top: Dimension(context).toPx(50)),
                  decoration: BoxDecoration(
                    color: Color(0xFF1661FF),
                    borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(44)))
                  ),
                ),
              ),
              onTap: (){
                this.sendCode();
              },
            )
          ],
        ),
        width: Dimension(context).toPx(327),
        padding: EdgeInsets.only(top: Dimension(context).toPx(48),left: Dimension(context).toPx(32)),
        decoration: BoxDecoration(
          color: Colors.white
        ),
        constraints: BoxConstraints(
          minWidth: Dimension(context).toVw(100),
          minHeight: Dimension(context).toVh(100)
        ),
      ),
    );
  }

  void sendCode(){
    if(Common().checkChinaPhone(this.phone)){
      setState(() {
        focusStatus = 2;
        focusNode.unfocus();
        XlskRouter.go(context, '/login/code?phone=${this.phone}');
      });
    }else{
      setState(() {
        focusStatus = 1;
        EasyLoading.showToast('请输入正确的电话号码');
      });
    }
  }

  @override
  void dispose() {
    super.dispose();
    focusNode.dispose();
  }
}
